<template>
    <div>
        <view class="content">
            <view class="card wrap-info white-bg">
                <view class="title-color fb-28" v-if="showStepper"> 已选升级项目 </view>
                <view class="title-color fb-28" v-else> 当前服务项目 </view>

                <view class="info-bg flex align-center" v-if="!showStepper">
                    <image class="file" :src="dataInfo.service_cover" />

                    <view class="info-right">
                        <view class="title-color fb-30 limit-num-line">
                            {{ dataInfo.service_name }}
                        </view>

                        <view class="service-time f-26">
                            服务师:{{ technician.name }}
                        </view>

                        <view class="service-time f-26 flex align-center">
                            <image
                                class="lock"
                                src="/static/static/technician/joinUs/lock.png"
                                mode="scaleToFill"
                            />
                            {{ dataInfo.time_long }}分钟
                        </view>

                        <view class="price price-color">
                            <text class="symbol fb-24">¥</text>
                            <text class="fb-32">
                                {{ (dataInfo.price || 0).toFixed(2) }}
                            </text>
                        </view>
                    </view>
                </view>

                <view class="info-bg flex align-center" v-if="showStepper">
                    <image class="file" :src="dataInit.image" />

                    <view class="info-right">
                        <view class="title-color fb-30 limit-num-line">
                            {{ dataInit.name }}
                        </view>

                        <view class="service-time f-26">
                            服务师:{{ technician.name }}
                        </view>

                        <view class="service-time f-26 flex align-center">
                            <image
                                class="lock"
                                src="/static/static/technician/joinUs/lock.png"
                                mode="scaleToFill"
                            />
                            {{ dataInit.duration_time }}分钟
                        </view>

                        <view class="price price-color">
                            <text class="symbol fb-24">¥</text>
                            <text class="fb-32">
                                {{ dataInit.price }}
                                <text class="premium f-24"> 需补差价: </text>
                                <text class="premiumPrice f-24">
                                    {{
                                        (
                                            dataInit.price * number -
                                            dataInfo.price
                                        ).toFixed(2)
                                    }}
                                </text>
                            </text>
                        </view>
                    </view>

                    <view class="stepper flex align-center">
                        <view
                            class="left flex align-center just-center"
                            @click="onNumChange('sub')"
                        >
                            <image
                                class="icon sub"
                                src="/static/static/technician/joinUs/sub.png"
                                mode="scaleToFill"
                            />
                        </view>
                        <view class="number">
                            {{ number }}
                        </view>
                        <view
                            class="right flex align-center just-center"
                            @click="onNumChange('add')"
                        >
                            <image
                                class="icon add"
                                src="/static/static/technician/joinUs/adds.png"
                                mode="scaleToFill"
                            />
                        </view>
                    </view>
                </view>

                <view
                    class="bottomBox flex align-center just-between"
                    v-if="showStepper"
                >
                    <view class="name f-28 t-l">
                        {{ dataInfo.service_name }}
                    </view>
                    <view class="up">
                        <image
                            src="/static/static/technician/joinUs/up.png"
                            mode="scaleToFill"
                        />
                    </view>
                    <view class="name f-28 t-r">
                        {{ dataInit.name }}
                    </view>
                </view>
            </view>

            <view class="card wrap-info white-bg">
                <view class="title-color fb-28" v-if="showStepper">
                    切换其他项目
                </view>
                <view class="title-color fb-28" v-else> 可升级项目 </view>
                <view
                    v-for="(item, index) in dataList"
                    :key="index"
                    :class="item.show ? 'border_bottom' : ''"
                >
                    <view
                        class="info-bg flex align-center"
                        v-if="item.show == true"
                    >
                        <image class="file" :src="item.image" />

                        <view class="info-right">
                            <view class="title-color fb-30 limit-num-line">
                                {{ item.name }}
                            </view>

                            <view class="service-time f-26">
                                服务师:{{ technician.name }}
                            </view>

                            <view class="service-time f-26 flex align-center">
                                <image
                                    class="lock"
                                    src="/static/static/technician/joinUs/lock.png"
                                    mode="scaleToFill"
                                />
                                {{ item.duration_time }}分钟
                            </view>

                            <view class="price price-color">
                                <text class="symbol fb-24">¥</text>
                                <text class="fb-32">{{ item.price }}</text>
                            </view>
                        </view>

                        <view class="arrow">
                            <view class="btn" @click="choose(item, index)">
                                升级为此项目
                            </view>
                        </view>
                    </view>
                </view>
                <view class="noData" v-if="dataList.length == 0">
                    <image src="/static/static/common/noData.png" mode="scaleToFill" />
                    <view class="t-c">暂无数据</view>
                </view>
            </view>
        </view>
    </div>
</template>
<script>
export default {
    props: {
        dataInit: {
            type: Object,
            default: {},
        },
        dataInfo: {
            type: Object,
            default: {},
        },
        dataList: {
            type: Array,
            default: [],
        },
        showStepper: {
            type: Boolean,
            default: false,
        },
        number: {
            type: Number,
            default: 1,
        },
        technician: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {};
    },

    mounted() {},

    methods: {
        // 选择升级项目
        choose(item, index) {
            this.$emit("choose", item, index);
        },
        // 修改数量
        onNumChange(type) {
            this.$emit("onNumChange", type);
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    padding: 20rpx 20rpx 200rpx 20rpx;
    box-sizing: border-box;
}
.card {
    padding: 28rpx 25rpx;
    background-color: white;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    .title {
        color: $title-color;
    }
}
.wrap-order-status {
    position: sticky;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 100rpx;
    background: white;
    z-index: 10;
    flex-wrap: wrap;

    .status-item {
        flex: 1;
        height: 100rpx;
        overflow: hidden;

        > view {
            display: inline-block;
            height: 100rpx !important;
            line-height: 100rpx;
            box-sizing: border-box;
            border-bottom: 6rpx solid white;
        }

        .active {
            border-color: $theme-color;
        }
    }
}
.wrap-info {
    padding: 30rpx 20rpx;
    box-sizing: border-box;

    .info-bg {
        padding: 20rpx 0;
        width: 100%;
        overflow: hidden;
        position: relative;

        .file {
            width: 176rpx;
            height: 176rpx;
            border-radius: 20rpx;
            overflow: hidden;
        }

        .info-right {
            margin-left: 20rpx;
            flex: 1;
            overflow: hidden;
            margin-right: 10rpx;

            .service-time {
                margin-top: 14rpx;
                color: #a3a3a3;
            }

            .price {
                margin-top: 14rpx;

                .symbol {
                    margin-right: 5rpx;
                }
            }
        }

        .arrow {
            .btn {
                font-size: 24rpx;
                height: 50rpx;
                line-height: 50rpx;
                padding: 0 20rpx;
                border-radius: 20rpx;
                text-align: center;
                color: white;
                background-color: $theme-color;
                position: absolute;
                top: 40%;
                right: 0rpx;
            }
        }
        .stepper {
            position: absolute;
            right: 0;
            top: 20%;
            z-index: 10;
            .left {
                width: 38rpx;
                height: 38rpx;
                border: 2rpx solid $theme-color;
                border-radius: 20rpx;
                .icon {
                    width: 16rpx;
                    height: 2rpx;
                }
            }
            .number {
                margin: 0 10rpx;
            }
            .right {
                width: 38rpx;
                height: 38rpx;
                background: $theme-color;
                border-radius: 20rpx;
                .icon {
                    width: 16rpx;
                    height: 16rpx;
                }
            }
        }
    }
    .info-bg:last-child {
        padding-bottom: 0;
    }
}

.bottomBox {
    border-top: 2rpx solid #ececec;
    padding-top: 30rpx;
    .name {
        flex: 1;
        overflow: hidden;
        margin: 0 10rpx;
        line-height: 1.2;
    }
    .up {
        width: 172rpx;
        height: 46rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
}
.t-l {
    text-align: left;
}
.t-r {
    text-align: right;
}

.t-c {
    text-align: center;
}

.noData {
    color: #999;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-color {
    color: $title-color;
}

.price-color {
    color: $price-color !important;
}

.premium {
    color: #999;
    font-weight: normal;
    margin-left: 20rpx;
}

.premiumPrice {
    color: $price-color;
    font-weight: normal;
}
.premiumPrice::before {
    content: "¥";
    margin-left: 10rpx;
}

.lock {
    width: 24.15rpx;
    height: 24.15rpx;
    margin-right: 5rpx;
}
.border_bottom {
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #ececec;
}
.border_bottom:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.btns {
    background: white;
    width: 100vw;
    height: 130rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
    z-index: 99999;
    .btn {
        position: absolute;
        height: 80rpx;
        line-height: 80rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        background: $grad-theme-color;
        border-radius: 40rpx;
        color: white;
        text-align: center;
        font-size: 30rpx;
    }
}
</style>